<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('#btn').on('click',function () {
//                // 找到属性为size 背景变成红色
//                $('[size]').css('background','red');
//                // 找到属性为size 属性值为30 背景变成红色
//                $('[size=30]').css('background','red');
//                // 找到属性为value且 属性值开头为fg 背景变成红色
//                $('[value^=fg]').css('background','yellow');
//                // 找到属性为value且 属性值结尾为362 宽度变成400
//                $('[value$=362]').css('width','400px');
                /**
                 * 可以找到两种情况
                 * A 找到属性为size 其值不等于60的
                 * B 没有size这个属性的
                 */
//                $('[size!=60]').css('background','red');
                // 集合选择器 同时要满足 [s1][s2][s3]
                $('input[class][value^=r]').css('background','red');

            })
        })
    </script>
</head>
<body>
<input type="text" value="123"/>
<br />
<input type="text" width="300" size="60" value="size60"/>
<br />
<input type="text" value="fgh@.com"/>
<br />
<input type="text" size="30" value="123@362"/>
<br />
<input type="text" class="su" value="rty"/>
<br />
<input type="text" value="rty"/>
<br />
<input type="button" value="click" id="btn"/>
</body>
</html>